<!DOCTYPE html>
<html>
  <head>
    <title>Agregar punto</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html, body {
        height: 100%;
        margin: 0;
        font-family: verdana;
        }
        iframe{
        border:0px;
        }
        #map-canvas {
        width: 100%;
        height: 100%;
        }
        .iwContent{width:400px;}
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        
      
      var contentString = 'Ha ocurrido un error';
      
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

      var map;
      var markers = [];

      function initialize() {
        var haightAshbury = new google.maps.LatLng(4.636215392993458,-74.0837287902832);
        var mapOptions = {
          zoom: 17,
          center: haightAshbury,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        google.maps.event.addListener(map, 'click', function(event) {
          addMarker(event.latLng);
        });
      }

      function addMarker(location) {
        deleteOverlays();
        marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
        //infowindow.setContent('<iframe src="http://www.w3schools.com" height="380" width="240"></iframe>');
        infowindow.setContent('<iframe src="iframe.html?coordinate='+location+'" height="400" width="280"></iframe>');
        infowindow.open(map,marker);
              
      }

      function setAllMap(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

       function clearOverlays() {
        setAllMap(null);
      }

       function showOverlays() {
        setAllMap(map);
      }

       function deleteOverlays() {
        clearOverlays();
        markers = [];
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
